<script setup>
import { ref } from "vue";
import logo from "../../assets/images/logo.png";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
import { apiGetPracticeInfo } from "../../apis/practiceApi";
const router = useRouter();
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const total = ref(0);
const currentPage = ref(1);
const pageSize = 10;
const error = ref(false);
const searchContent = ref("");
const active = ref("home");
const goDetail = (data) => {
  router.push({
    name: "practiceDetailMobile",
    query: { ...data },
  });
};
const onLoad = async () => {
  await getPracticeInfo();
  currentPage.value++;
};
const onSearch = (val) => {
  list.value = [];
  currentPage.value = 1;
  onLoad();
};
const onChange = (index) => {
  console.log(index, 99);
};

const getPracticeInfo = () => {
  const data = {
    currentPage: currentPage.value,
    pageSize: pageSize,
    type: 1, //0 职位 1公司 2要求
    search: searchContent.value,
    publishType: 1,
    // ...params,
  };
  apiGetPracticeInfo(data)
    .then((res) => {
      if (currentPage.value === 1) {
        list.value = res.data;
      } else {
        list.value = list.value.concat(res.data);
      }
      total.value = res.total;

      // 加载状态结束
      loading.value = false;

      // 数据全部加载完成
      if (list.value.length === total.value) {
        finished.value = true;
      }
    })
    .catch((e) => {
      error.value = true;
    });
};
</script>

<template>
  <div style="background-color: #48a4ff;">
    <van-image height="50" src="https://www.uibe.edu.cn/img/logo.png" />
  </div>

  <van-sticky>
    <van-search
      v-model="searchContent"
      show-action
      shape="round"
      label="公司"
      placeholder="请输入搜索内容"
      @search="onSearch"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
  </van-sticky>
  <van-list
    class="list"
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
    v-model:error="error"
    error-text="请求失败，点击重新加载"
  >
    <div
      v-for="item in list"
      @click="goDetail(item)"
      :key="item.practiceId"
      class="cell"
    >
      <div class="title">{{ item.company }}</div>
      <div class="station" style="">
        <van-tag
          type="default"
          color="#5ebbff"
          text-color="#ffffff"
          size="large"
          style="height: 30px"
          >{{ item.station }}</van-tag
        >
        <van-tag
          type="default"
          color="#5ebbff"
          text-color="#ffffff"
          size="large"
          style="height: 30px"
          >{{ item.salary ? item.salary : "面议" }}</van-tag
        >
      </div>
      <div class="requirement">
        <span>{{ item.requirement }}</span>
      </div>
      <div class="info">
        <span class="time">{{
          new Date(parseFloat(item.currentTime)).toLocaleDateString()
        }}</span>
        <span class="address">{{ item.address }}</span>
      </div>
    </div>
  </van-list>
  <van-tabbar v-model="active" @change="onChange" fixed>
    <van-tabbar-item name="home" icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item name="search" icon="search">搜索</van-tabbar-item>
    <!-- <van-tabbar-item name="friends" icon="friends-o">我的</van-tabbar-item> -->
    <!-- <van-tabbar-item name="setting" icon="setting-o">设置</van-tabbar-item> -->
  </van-tabbar>
</template>
<style scoped>
.list {
  background-color: #eff2f5;
  padding: 12px;
  padding-top: 8px;
}
.title {
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  padding: 0 10px;
  background: linear-gradient(to right, rgb(234 191 255), rgb(60 205 255));
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器宽度的文本 */
  text-overflow: ellipsis; /* 超出部分显示为省略号 */
}

.station {
  padding: 5px 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.requirement {
  padding: 0 10px;
  height: 70px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  line-height: 30px;
  /* 这里设置行高 */
  max-height: 60px;
  /* 行高 x 行数 */
}
.info {
  height: 20px;
  width: auto;
  padding: 5px 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: #adadad;
  font-size: 15px;
}
.address {
  width: 150px;
  text-align: right;
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏超出容器宽度的文本 */
  text-overflow: ellipsis; /* 超出部分显示为省略号 */
}
.time {
}
.cell {
  height: 200px;
  width: 100%;
  background-color: white;
  border-radius: 20px;
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.2); /* 水平偏移量 | 垂直偏移量 | 模糊半径 | 阴影颜色 */
  /* transition: box-shadow 0.3s; 可选：为阴影添加过渡效果 */
}
</style>
